<template>
  <div class="order">
    <div class="order_title">

      <ul @click="activehandel" class="order_title_url"  >

        <li class="order_li">全部订单<div class="redcircle" ><span class="circle">{{total[0]}}</span></div></li>
        <li class="order_li">待接单<div class="redcircle"><span class="circle">{{total[1]}}</span></div></li>
        <li class="order_li">待派送<div class="redcircle"><span class="circle">{{total[2]}}</span></div></li>
        <li class="order_li">派送中<div class="redcircle"><span class="circle">{{total[3]}}</span></div></li>
        <li class="order_li">已完成<div class="redcircle"><span class="circle">{{total[4]}}</span></div></li>
        <li class="order_li">已取消<div class="redcircle"><span class="circle">{{total[5]}}</span></div></li>
      </ul>
    </div>
<div class="order_main">
   <!-- 表单头 -->
   <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="订单号:">
            <el-input style="width:150px" clearable v-model="searchForm.number" placeholder="请填写订单号"></el-input>
          </el-form-item>
          <el-form-item   label="手机号:">
            <el-input style="width:150px" clearable v-model="searchForm.phone" placeholder="请填写手机号"></el-input>
            </el-form-item>

          <el-form-item label="下单时间:">
            <el-date-picker
              v-model="ordertime"
              clearable

               class="time-picker"
             popper-class='RedefineScope-node-repeat'
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"

              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 355px; "  >
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="queryorder">查询</el-button>
          </el-form-item>
      </el-form>

  <!-- 表格 全部订单 -->
          <div v-if="checkallorder">
        <Allorder :tableData="tableDatas"  @refresh="refresh"></Allorder>
         </div>

       <!--表格 待接单 -->
        <div v-else-if="pending_orders">
          <Waitorder :tableData="tableData2"  @refresh="refresh"></Waitorder>
         </div>

         <!--表格 待派送 -->
        <div v-else-if="wait_send_orders">
          <Waitsendorder  :tableData="tableData3"  @refresh="refresh" >

          </Waitsendorder >
         </div>

         <!--表格 派送中 -->
        <div v-else-if="send_orders">
          <Sendorder :tableData="tableData4"  @refresh="refresh">

          </Sendorder>
         </div>

          <!--表格 已完成 -->
        <div v-else-if="completed_orders">
          <Completedorder :tableData="tableData5"  @refresh="refresh">

          </Completedorder>
         </div>

         <!--表格 已取消 -->
        <div v-else-if="canceleted_orders">
          <Canceledorder :tableData="tableData6"  @refresh="refresh">

          </Canceledorder>
         </div>

     <!-- 分页 -->
        <!-- 分页 -->
        <div class="pagination">
         <el-pagination
          background
          layout="total,sizes,prev,pager,next,jumper"
         :current-page="page"
           :page-size="pageSize"
          :page-sizes="[5, 10]"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="totals"
            ></el-pagination>
        </div>
   </div>
  </div>
</template>

<script>

import { queryOrder } from '@/api/order'
import Allorder from '@/components/main/order/allorder.vue'
import Waitorder from '@/components/main/order/waitorder.vue'
import Waitsendorder from '@/components/main/order/waitsendorder.vue'
import Sendorder from '@/components/main/order/sendorder.vue'
import Completedorder from '@/components/main/order/completedorder.vue'
import Canceledorder from '@/components/main/order/canceledorder.vue'

export default {
  name: 'orderIndex',
  components: {
    Allorder,
    Waitorder,
    Waitsendorder,
    Sendorder,
    Completedorder,
    Canceledorder

  },
  data () {
    return {
      ordertime: '',
      searchForm: {
        number: '',
        phone: ''

      },

      /* 分页 */
      page: 1,
      pageSize: 5,
      pagelimit: 5,
      totals: 0,
      total: [],

      tableDatas: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],

      /* 导航 */
      // 动态决定ul的class
      ulClass: 'active',
      /* 全部订单 */
      li: [],
      checkallorder: false,

      // 待接单
      pending_orders: false,

      // 待派送
      wait_send_orders: false,
      // 派送中
      send_orders: false,
      // 已完成
      completed_orders: false,
      // 已取消
      canceleted_orders: false,
      statu: ''
    }
  },
  created () {
    this.queryorder()
  },
  mounted () {
    this.li = document.querySelectorAll('.order_li')

    this.li[0].classList = this.ulClass
    this.checkallorder = true
    this.init()
  },
  methods: {
    activehandel (e) {
      this.li.forEach((item) => {
        item.classList.remove('active')

        if (item.innerText === e.target.innerText) {
          e.target.classList.add(this.ulClass)
        }
      })

      if (e.target.innerText.substring(0, 3) === '待接单') {
        this.pending_orders = true
        this.checkallorder = false
        this.wait_send_orders = false
        this.send_orders = false
        this.completed_orders = false
        this.canceleted_orders = false
        this.queryorder(2)
        this.page = 1
      } else if (e.target.innerText.substring(0, 4) === '全部订单') {
        this.pending_orders = false
        this.checkallorder = true
        this.wait_send_orders = false
        this.send_orders = false
        this.completed_orders = false
        this.canceleted_orders = false
        this.queryorder()
        this.page = 1
      } else if (e.target.innerText.substring(0, 3) === '待派送') {
        this.pending_orders = false
        this.checkallorder = false
        this.wait_send_orders = true
        this.send_orders = false
        this.completed_orders = false
        this.canceleted_orders = false
        this.queryorder(3)
        this.page = 1
      } else if (e.target.innerText.substring(0, 3) === '派送中') {
        this.pending_orders = false
        this.checkallorder = false
        this.wait_send_orders = false
        this.send_orders = true
        this.completed_orders = false
        this.queryorder(4)
        this.page = 1
      } else if (e.target.innerText.substring(0, 3) === '已完成') {
        this.pending_orders = false
        this.checkallorder = false
        this.wait_send_orders = false
        this.send_orders = false
        this.completed_orders = true
        this.canceleted_orders = false
        this.queryorder(5)
        this.page = 1
      } else if (e.target.innerText.substring(0, 3) === '已取消') {
        this.pending_orders = false
        this.checkallorder = false
        this.wait_send_orders = false
        this.send_orders = false
        this.completed_orders = false
        this.canceleted_orders = true
        this.queryorder(6)
        this.page = 1
      }
    },
    async queryorder (status) {
      if (this.ordertime !== '') {
        this.searchForm.startTime = this.ordertime[0]
        this.searchForm.endTime = this.ordertime[1]
      }

      this.searchForm.page = this.page
      this.searchForm.pageSize = this.pageSize
      this.searchForm.status = status
      //   console.log(this.searchForm, 'searchForm')
      // 查询订单

      const res = await queryOrder(this.searchForm)

      if (status === undefined) {
        this.total[0] = res.data.total
        this.totals = res.data.total
        this.tableDatas = res.data.records
        this.statu = status
      } else if (status === 2) {
        this.total[1] = res.data.total
        this.tableData2 = res.data.records
        this.totals = res.data.total
        this.statu = status
      } else if (status === 3) {
        this.total[2] = res.data.total
        this.totals = res.data.total
        this.tableData3 = res.data.records
        this.statu = status
      } else if (status === 4) {
        this.total[3] = res.data.total
        this.totals = res.data.total
        this.tableData4 = res.data.records
        this.statu = status
      } else if (status === 5) {
        this.total[4] = res.data.total
        this.totals = res.data.total
        this.tableData5 = res.data.records
        this.statu = status
      } else if (status === 6) {
        this.total[5] = res.data.total
        this.totals = res.data.total
        this.tableData6 = res.data.records
        this.statu = status
      }
    },

    async queryorders (status) {
      if (this.ordertime !== '') {
        this.searchForm.startTime = this.ordertime[0]
        this.searchForm.endTime = this.ordertime[1]
      }

      this.searchForm.page = this.page
      this.searchForm.pageSize = this.pageSize
      this.searchForm.status = status
      //   console.log(this.searchForm, 'searchForm')
      // 查询订单

      const res = await queryOrder(this.searchForm)

      if (status === undefined) {
        this.total[0] = res.data.total

        this.tableDatas = res.data.records
      } else if (status === 2) {
        this.total[1] = res.data.total
        this.tableData2 = res.data.records
      } else if (status === 3) {
        this.total[2] = res.data.total

        this.tableData3 = res.data.records
      } else if (status === 4) {
        this.total[3] = res.data.total

        this.tableData4 = res.data.records
      } else if (status === 5) {
        this.total[4] = res.data.total

        this.tableData5 = res.data.records
      } else if (status === 6) {
        this.total[5] = res.data.total

        this.tableData6 = res.data.records
      }
    },

    init () {
      for (let i = 2; i < 7; i++) {
        this.queryorders(i)
      }
    },

    // 子组件刷新页面
    refresh (status) {
      this.statu = status
      this.queryorder(status)
      this.init()
    },

    handleSizeChange (val) {
    // 更新当前页码展示数量

      this.pageSize = val
      this.queryorder(this.statu)
    },
    handleCurrentChange (val) {
    // 更新当前页码是第几页

      this.page = val
      this.queryorder(this.statu)
    }
  }

}

</script>

<style lang="less"  scoped>
.order {
  height: 717px;

  /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);

  padding-left: 16px;
 padding-right: 18px;

  margin-left: 20px;
  margin-top: 20px; */
}

.order_title_url {
  display: flex;
  text-align: center;

  padding-top: 20px;
  padding-left: 20px;

    width: 600px;
}
li{
   width: 100px;
    height:40px;
     padding-top: -20px;
     padding-right: 20px;
     padding-left: 20px;

    line-height: 40px;

    background-color: rgba(248, 245, 245, 0.616);
    border: 1px solid rgba(0, 0, 0, 0.048);

}
.active{
  background-color: orange;
  font-weight: 600;

}
/* li:hover {
    background-color: orange;
    font-weight: 600;
} */
li:active {
     background-color: orange;
  font-weight: 600;
}

// 表格
.order_main{
  width: 1145px;
  height: 450px;
  padding-top: 40px;
  padding-left: 40px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.058);
  margin-top:40px;
  margin-left:20px
}

// 红心圆圈
.circle {
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: red;
  border-radius: 50%; /* 圆形 */
  color: white;
  text-align: center;
  line-height: 15px; /* 使数字垂直居中 */
  font-size: 12px;

}
.redcircle{
  margin-left:100px;margin-top:-52px
}

// 日期
.el-form-item {
  padding-right: 20px;
}
</style>

<style>
/* 时间弹层位置 */

.el-picker-panel.el-date-range-picker.el-popper.has-time.RedefineScope-node-repeat{
  margin-left: -120px;

}
/* 头部 */
.el-date-range-picker__time-header{
  height: 40px;
}

 .el-date-range-picker__editors-wrap{
   /* 左边 */
    position: absolute;
    z-index: 3000;

    width: 300px;

    margin-top: -4px;
    margin-left: -5px;

  }

.el-icon-arrow-right{

  /* 中间 */
  width: 20px;
  margin-left: 80px;

}

 /* 分页 */
.pagination{
 padding-left: 10px;

}
 .el-icon.el-icon-arrow-right{
  margin-left: 5px;
}
</style>
